<template>
	<view class="add">
		<view class="zai-box">
		<image src="http://119.29.2.163:9000/xiaomayi/img/touxiang/xiaomayi.png" mode='aspectFit' class="zai-logo"></image>
		<view class="zai-form">
			<input class="zai-input" v-model="username" maxlength="11" placeholder="请输入手机号码" />
			<view class="zai-input-btn">
				<input class="zai-input" maxlength="6" placeholder="验证码" />
				<view class="zai-checking" @click="checking" v-if="state===false">获取验证码</view>
				<view class="zai-checking zai-time" v-if="state===true">倒计时{{ currentTime }}s</view>
			</view>
			<input class="zai-input" v-model="password" maxlength="16" password placeholder="请输入新的密码" />
			<input class="zai-input" v-model="confirmpassword" maxlength="16" password placeholder="请确认密码" />
			<button class="zai-btn" @click="changePassword()">修改密码并登录</button>
			<view class="zai-label"><text @click="toLogin()">已有账号，点此去登录.</text></view>
		</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				state: false, //是否开启倒计时
				totalTime: 60, //总时间，单位秒
				recordingTime: 0, //记录时间变量
				currentTime: 0, //显示时间变量
				username: '',
				password: '',
				confirmpassword: ''
			}
		},
		onLoad() {

		},
		methods: {
			checking() {
				//把显示时间设为总时间
				this.currentTime = this.totalTime;
				//开始倒计时
				this.state = true;
				//执行倒计时
				this.checkingTime();
			},
			checkingTime() {
				let that = this;
				//判断是否开启
				if (this.state) {
					//判断显示时间是否已到0，判断记录时间是否已到总时间
					if (this.currentTime > 0 && this.recordingTime <= this.totalTime) {
						//记录时间增加 1
						this.recordingTime = this.recordingTime + 1;
						//显示时间，用总时间 - 记录时间
						this.currentTime = this.totalTime - this.recordingTime;
						//1秒钟后，再次执行本方法
						setTimeout(() => {
							//定时器内，this指向外部，找不到vue的方法，所以，需要用that变量。
							that.checkingTime();
						}, 1000)
					} else {
						//时间已完成，还原相关变量
						this.state = false; //关闭倒计时
						this.recordingTime = 0; //记录时间为0
						this.currentTime = this.totalTime; //显示时间为总时间
					}
				} else {
					//倒计时未开启，初始化默认变量
					this.state = false;
					this.recordingTime = 0;
					this.currentTime = this.totalTime;
				}
			},
			toLogin() {
				uni.reLaunch({
					url: '/pages/6_Login1Page/Login'
				})
			},
			changePassword() {
				var re = /^[0-9]*$/
				if ((this.username.length != 11) || (!re.test(this.username))) {
					uni.showToast({
						icon: 'none',
						title: '请正确输入11位手机号'
					});
					return;
				} else if (this.password.length < 6) {
					uni.showToast({
						icon: 'none',
						title: '密码最短为 6 个字符'
					});
					return;
				} else if (this.password != this.confirmpassword) {
					uni.showToast({
						icon: 'none',
						title: '两次密码输入不一致'
					});
				} else {
					uni.request({
						method: 'post',
						url: setting.url + '/user/forgetPassword',
						data: {
							account: this.username,
							password: this.password,
						},
						success(res) {
							console.log(res.data)
							if (res.data.code == -1) {
								uni.showToast({
									icon: 'none',
									title: '此账号已被注册，请更换手机号'
								});
							} else {

								uni.showToast({
									icon: 'none',
									title: '账号注册成功，已登录'
								})
								uni.reLaunch({
									url: '../todos/todos'
								})
							}

						}

					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.add{
		background: linear-gradient(200deg, #ecf5ff, #fdf6ec);
		width: 100vw;
		height: 100vh;
	}
	.zai-box {
		padding: 0 100upx;
		position: relative;
	}

	.zai-logo {
		margin-top: 100upx;
		width: 100%;
		width: 100%;
		height: 100px;
	}

	.zai-title {
		position: absolute;
		top: 0;
		line-height: 360upx;
		font-size: 68upx;
		color: #fff;
		text-align: center;
		width: 100%;
		margin-left: -100upx;
	}

	.zai-form {
		margin-top: 150upx;
	}

	.zai-input {
		background: #e2f5fc;
		margin-top: 30upx;
		border-radius: 100upx;
		padding: 20upx 40upx;
		font-size: 36upx;
	}

	.input-placeholder,
	.zai-input {
		color: #94afce;
	}

	.zai-label {
		padding: 60upx 0;
		text-align: center;
		font-size: 30upx;
		color: #a7b6d0;
	}

	.zai-btn {
		background: #ff65a3;
		color: #fff;
		border: 0;
		border-radius: 100upx;
		font-size: 36upx;
		margin-top: 60upx;
	}

	.zai-btn:after {
		border: 0;
	}

	/*验证码输入框*/
	.zai-input-btn {
		position: relative;
	}

	.zai-input-btn .zai-input {
		padding-right: 260upx;
	}

	.zai-checking {
		position: absolute;
		right: 0;
		top: 0;
		background: #ff65a3;
		color: #fff;
		border: 0;
		border-radius: 110upx;
		font-size: 36upx;
		margin-left: auto;
		margin-right: auto;
		padding-left: 28upx;
		padding-right: 28upx;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		line-height: 2.2;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		padding-top: 2upx;
		padding-bottom: 2upx;
	}

	.zai-checking.zai-time {
		background: #a7b6d0;
	}

	/*按钮点击效果*/
	.zai-btn.button-hover {
		transform: translate(1upx, 1upx);
	}
</style>